8e:I[903690,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu"],"SWRDataProvider"] 90:T165e,[V0_FILE]typescriptreact:file="components/chat-form.tsx" "use client" import { cn } from "@/lib/utils" import { useChat } from "ai/react" import { ArrowUpIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip" import { AutoResizeTextarea } from "@/components/autoresize-textarea" export function ChatForm({ className, ...props }: React.ComponentProps<"form">) { const { messages, input, setInput, append } = useChat({ api: "/api/chat", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() void append({ content: input, role: "user" }) setInput("") } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSubmit(e as unknown as React.FormEvent) } } const header = (

Basic AI Chatbot Template

This is an AI chatbot app template built with Next.js, the{" "} Vercel AI SDK, and Vercel KV.

Connect an API Key from your provider and send a message to get started.

) const messageList = (

{messages.map((message, index) => (

{message.content}

))}

) return (

{messages.length ? messageList : header}

) } [V0_FILE]typescriptreact:file="components/autoresize-textarea.tsx" "use client" import { cn } from "@/lib/utils" import React, { useRef, useEffect, type TextareaHTMLAttributes } from "react" interface AutoResizeTextareaProps extends Omit, "value" | "onChange"> { value: string onChange: (value: string) => void } export function AutoResizeTextarea({ className, value, onChange, ...props }: AutoResizeTextareaProps) { const textareaRef = useRef(null) const resizeTextarea = () => { const textarea = textareaRef.current if (textarea) { textarea.style.height = "auto" textarea.style.height = `${textarea.scrollHeight}px` } } useEffect(() => { resizeTextarea() }, [value]) return (

{
        onChange(e.target.value)
        resizeTextarea()
      }}
      className={cn("resize-none min-h-4 max-h-80", className)}
    />
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" entry="true"
import { ChatForm } from "@/components/chat-form"

export default function Page() {
  return <ChatForm />
}

[V0_FILE]typescriptreact:file="app/layout.tsx" entry="true"
import { cn } from "@/lib/utils"
import { TooltipProvider } from "@/components/ui/tooltip"
import { Inter } from "next/font/google"
import type { ReactNode } from "react"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "OpenAI and AI SDK Chatbot",
  description: "A simple chatbot built using the AI SDK and gpt-4o-mini.",
}

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body className={cn("flex min-h-svh flex-col antialiased", inter.className)}>
        <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="app/api/chat/route.ts" entry="true"
import { type CoreMessage, streamText } from "ai"
import { openai } from "@ai-sdk/openai"

export async function POST(req: Request) {
  const { messages }: { messages: CoreMessage[] } = await req.json()

const result = streamText({
    model: openai("gpt-4o-mini"),
    system: "You are a helpful assistant.",
    messages,
  })

return result.toDataStreamResponse()
}
84:["$","$L8e",null,{"chatId":"nhvl8UM4OpA","children":["$","$L8f",null,{"data":{"@\"active-block\",\"nhvl8UM4OpA\",":{"id":"b_BtIH0wVe39T","messageId":"HrrMJB7PA7UCzKpuKdolccYsa6RVYMUU","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"OpenAI and AI SDK Chatbot","type":"code-project","project":"OpenAI and AI SDK Chatbot"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"nhvl8UM4OpA\",":false,"":null},"children":"$L91"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from shadcn

More Templates Like This